<template>
	<view class="content">
		<u-navbar  title="我的相册":background="{background: '#000'}" back-icon-color="#ffffff" title-color="#fff" :border-bottom="false" hover-class="none">
		</u-navbar>
		<view class="photos_vip">
			<view>
				相册是否VIP可见 
			</view>
			<switch :checked="photos_vip_type==1?'checked':''" @change="photos_vip" color="#FFCC33" style="transform:scale(0.7)"/>
		</view>
		<view class="photos_list">
			<view class="image" v-if="images.length!=0" v-for="(item,index) in images">
				<image class="close" src="../../static/close2.png" @click="remove(index)"></image>
				<image class="img" :src="item.types=='1' ? HOSTURL + item.pic[0] : HOSTURL + item.cover" @click="preview(index)" mode="aspectFill"></image>
				<image class="hot" v-if="item.burn==1" src="../../static/fen.png"></image>
				<view class="showImg_permission" v-if="item.burn == '1' && item.packet > 0">阅后即焚的红包{{item.types=='1'?'照片':'视频'}}</view>
				<view class="showImg_permission" v-if="item.burn == '1' && item.packet == 0">阅后即焚</view>
				<view class="showImg_permission" v-if="item.burn == '0' && item.packet > 0">红包{{item.types=='1'?'照片':'视频'}}</view>
			</view>
			<view class="image">
				<image class="img" @click="quanxian" src="/static/moments_publish_add.png" mode="aspectFill"></image>
			</view>
		</view>
		<u-action-sheet :list="picopslist" @click="picopsclick" v-model="picopsshow"></u-action-sheet>
		<u-action-sheet :list="picops2list" @click="picops2click" v-model="picops2show"></u-action-sheet>
		<u-action-sheet :list="picops3list" @click="picops3click" v-model="picops3show"></u-action-sheet>
		<u-modal v-model="rmodal" content="是否确定删除该图？" show-cancel-button @cancel="ridx = -1" @confirm="removeconfirm"></u-modal>
	</view>
</template>

<script>
	import Get from "@/js_sdk/mcc-getvideoimg/ndex.js"
	export default {
		data() {
			return {
				HOSTURL: this.$HOSTURL,
				photos_vip_type:0,
				images:[],
				ridx: -1,
				rmodal: false,
				picopslist:[{text:'照片'},{text:'视频'}],
				picopsshow:false,
				picops2list:[],
				picops2show:false,
				picyinsi:'公开（推荐）',
				picops3list:[{text:'公开（推荐）'},{text:'查看付费相册'},{text:'隐身'}],
				picops3show:false,
				addpic:[-1,-1],
			}
		},
		onShow() {
			
			this.getuserimglist()
		},
		methods: {
			quanxian(){
				var that = this;
				var xiangce = 0;
				var xiangji = 0;
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限
				const android_camera = 'android.permission.CAMERA';
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  console.log('相册未授权');
					  xiangce = 1;
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
				plus.android.checkPermission(
				  android_camera,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  console.log('相机未授权');
					  xiangji = 1;
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
				setTimeout(function(){
					console.log(xiangce);
					console.log(xiangji);
					if(xiangce == 1 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 1 && xiangji == 0){
						uni.showModal({
							title: '提示',
							content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 0 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else{
						that.picopsshow = true;
					}
				},100)
			},
			async photos_vip(){
				var that = this;
				console.log(that.photos_vip_type);
				if(that.photos_vip_type == 0){
					that.photos_vip_type = 1;
				}else{
					that.photos_vip_type = 0;
				}
				const { data: res } = await this.$Request({
					url:'api/user/photos_vip',
					data:{
						user_id: that.$store.state.userid,
						photos_vip: that.photos_vip_type
					}
				})
				if(res.code==200){
					uni.showToast({
						title:'修改成功'
					})
					// uni.navigateBack()
				}
			},
			preview(idx){
				if(this.images[idx].types==1){// 看图
					uni.previewImage({
						urls:[this.$formatImage(this.images[idx].pic[0])]
					})
				}else{
					this.nav('webview','video',this.$formatImage(this.images[idx].pic[0]))
				}
			},
			remove(idx){
				this.ridx = idx
				this.rmodal = true
			},
			async removeconfirm(){
				const {data:res} = await this.$Request({
					url:'api/Userimg/delImg',
					data: {
						img_id: this.images[this.ridx].id
					}
				})
				if(res.code==200){
					this.$u.toast('删除成功')
					this.images.splice(this.ridx, 1)
				}
			},
			
			// 获取相册列表
			async getuserimglist(){
				const { data: res } = await this.$Request({
					url:'api/Userimg/lists',
					data:{
						user_id: this.$store.state.userid,
						to_user: this.$store.state.userid
					}
				})
				this.images = res.result
			},
			// 选择上传图片或视频
			picopsclick(index){
				this.addpic[0]=index
				switch(index){
					case 0:
						this.picops2list = [{text:'公开（推荐）'},{text:'阅后即焚（查看2秒后焚毁）'}]
						break;
					case 1:
						this.picops2list = [{text:'公开（推荐）'},{text:'阅后即焚（查看30秒后焚毁）'}]
						break;
				}
				this.picops2show = true
			},
			// 选择上传图片或视频
			picopsclick(index){
				this.addpic[0]=index
				switch(index){
					case 0:
						this.picops2list = [{text:'公开（推荐）'},{text:'阅后即焚（查看2秒后焚毁）'}]
						break;
					case 1:
						this.picops2list = [{text:'公开（推荐）'},{text:'阅后即焚（查看30秒后焚毁）'}]
						break;
				}
				this.picops2show = true
			},
			picops2click(index){
				var _this = this
				this.addpic[1]=index
				switch(this.addpic[0]){
					case 0:
						uni.chooseImage({
							count: 1,
							success(chooseImageRes) {
								const tempFilePaths = chooseImageRes.tempFilePaths;
								_this.$Upimg({
									image: tempFilePaths[0]
								},(res)=>{
									_this.pushImg(res, '')
								})
							}
						})
						break;
					case 1:
						/*#ifdef APP*/
								uni.chooseVideo({
									sourceType: ['camera', 'album'],
									success: function (res) {
										console.log(res);
										// self.src = res.tempFilePath;
										Get(res.tempFilePath, 1).then(
										getimg => {
											console.log(getimg);
										})
										_this.$Upvideo(res.tempFilePath, function (v) {
											_this.$Upimg({
												image: res.tempFilePath
											}, function (u) {
												_this.pushImg(v, u);
											})
										})
									}
								});
						/*#endif*/
						/*#ifndef APP*/
							uni.chooseMedia({
								mediaType:['video'],
								count:1,
								success(res){
										console.log(res);
									_this.$Upvideo(res.tempFiles[0].tempFilePath, function (v) {
										_this.$Upimg({
											image: res.tempFiles[0].thumbTempFilePath
										}, function (u) {
											_this.pushImg(v, u);
										})
									})
								}
							})
						/*#endif*/
						
						break;
				}
			},
			// 上传相册
			async pushImg(url, cover){
				const {data:res} = await this.$Request({
					url:'api/upload/upload',
					data: {
						user_id: this.$store.state.userid,
						burn: this.addpic[1],
						types: this.addpic[0] + 1, // 1 图片 2视频
						cover: cover, // 视频封面
						photo_album: url
					}
				})
				if(res.code==200){
					this.getuserimglist()
				}
			},
			// 相册隐私
			picops3click(index){
				var _this = this
				if (index == 1) {
					if (this.userinfo.sex == '女' && this.userinfo.is_identity_authentication != 2) {
						return uni.showModal({
							title:'查看相册付费',
							content:'您还未认证，需要你认证后才可以去设置该权限。该权限可以设置非会员进入你的相册的金额',
							showCancel:true,
							confirmText:'我要认证',
							success(res){
								if(res.confirm){
									_this.nav('renzheng')
								}
							}
						})
					} else if (this.userinfo.sex == '男' && this.userinfo.is_vip == 0) {
						return uni.showModal({
							title:'查看相册付费',
							content:'您还不是会员，成为会员后才可以去设置该权限。该权限可以设置非会员进入你的相册的金额',
							showCancel:true,
							confirmText:'成为会员',
							success(res){
								if(res.confirm){
									_this.nav('member')
								}
							}
						})

					} else {
						this.photolistbyprice = true
					}
				}else{
					this.picyinsi = this.picops3list[index].text
					this.$Request({
						url:'apis/index.php/home/User/imgauth',
						data:{
							user_id:this.$store.state.userid,
							auth:index
						}
					})
				}
			},
			nav(url, params, value) {
				if(url=='wx'){
					if (this.userinfo.link_auth == -1) {
						return this.$u.toast('审核中')
					}
				}
				uni.navigateTo({
					url: `/pages/${url}/index${params?'?'+params+'='+value:''}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.content {
		height: 100vh;
		background-color: #000;
		overflow: auto;
		.uphead{
			padding: 20rpx 0;
			text{
				color: #ccc;
				margin: 16rpx 0;
				font-size: 22rpx;
			}
		}
		.tab{
			color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx 10rpx 30rpx;
		}
		.infoitem {
			background: #000;
			display: flex;
			padding: 20rpx 30rpx;
			&.teli{
				.label {
					flex: 1;
				}
				.value{
					width: auto;
				}
			}
			.label {
				width: 22%;
				font-weight: bold;
				color: #999;
			}
			.value{
				width: 78%;
				color: #fff;
			}
		}
		.photos_vip{
			margin: 42rpx;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
		}
		.photos_list{
			margin: 42rpx;
			display: flex;
			flex-wrap:wrap;
			justify-content: flex-start;
			.image{
			    position: relative;
				width: 208rpx;
				height: 208rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				
				.close{
					position: absolute;
					top:-20rpx;
					right: -20rpx;
					width:40rpx;
					height:40rpx;
					z-index: 9999;
				}
				
				.img {
					height: 100%;
					width: 100%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 16rpx;
				}
				.hot {
					position: absolute;
					left: 0;
					top: 0;
					width: 40rpx;
					height: 40rpx;
				}
				.showImg_permission {
				    position: absolute;
				    bottom: 0;
					width: 100%;
				    text-align: center;
				    background: rgba(153, 101, 255, 0.5);
				    color: #fff;
				    padding: 8rpx 0;
				    font-size: 20rpx;
				}
			}
			.image:nth-child(3n+2){
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}
	}
	
</style>
